<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<base href="<%=basePath%>">

<html>
    <head>
        <meta charset="utf-8">
        <title>
            阳光成单系统
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="System/css/x-admin.css" media="all">
        <link rel="stylesheet" href="System/lib/bootstrap/css/bootstrap.css" media="all">
        <link rel="stylesheet" href="System/lib/bootstrap/js/bootstrap.min.js" media="all">
    </head>
    <body style="height:1150px;">
    <div class="container-fluid ygyd-wrapper">
        <!--相关统计-->
        <div class="row">
        <div class="col-sm-6">
             <section class="panel" style="width:1200px; height:490px">
                        <div class="panel-heading">配送统计</div>
                        <div class="panel-body">
                            <div class="echarts" id="area" style="width:1120px; height:420px"></div>
                        </div>
             </section>
        </div>
        </div>
    </div>
        <script src="System/lib/layui/layui.js" charset="utf-8"></script>
        <script src="System/js/index.js"></script>
        <script src="System/js/echarts.min.js"></script>
        <script src="System/js/echart.js"></script>
    <script type="text/javascript">
        // 指定图表的配置项和数据
       var myChart = echarts.init(document.getElementById('area'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '地区订单统计',
                subtext: '仅供参考',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: [/*'广州', '佛山', '东莞', '中山', '深圳'*/
                    <c:forEach items="${sessionScope.ordergoods2}" var="order2">
                    '${order2.userAddress}',
                    </c:forEach>]
            },
            series: [{
                name: '地区会员数量',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                  /*  { value: 6335, name: '广州' },
                    { value: 4310, name: '佛山' },
                    { value: 2310, name: '东莞' },
                    { value: 3310, name: '中山' },
                    { value: 9310, name: '深圳' }*/
                    <c:forEach items="${sessionScope.ordergoods2}" var="order">
                    {
                        value: '${order.userAddress.length()}',
                        name: '${order.userAddress}'
                    },
                    </c:forEach>
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    </body>
</html>